

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>采购订单查询</title>
    <%@include file="/comm/head.jsp"%>

</head>

<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="70">
                    <form-item label="生成日期:">
                        <col span="12"> <date-picker @on-change="cgOrderVo.createTime=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px"  ></date-picker></col>
                        <col span="12"> <date-picker @on-change="cgOrderVo.endDate1=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px"  ></date-picker></col>
                    </form-item>
                    <form-item label="审核日期:">
                        <col span="12"> <date-picker @on-change="cgOrderVo.checkTime=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px"  ></date-picker></col>
                        <col span="12"> <date-picker @on-change="cgOrderVo.endDate2=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px"  ></date-picker></col>
                    </form-item>
                    <form-item label="下单员:">
                        <i-select v-model="cgOrderVo.creator" style="width: 105px"filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>

                    <form-item label="采购日期:">
                        <col span="12"> <date-picker @on-change="cgOrderVo.purchaseTime=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px"  ></date-picker></col>
                        <col span="12"> <date-picker @on-change="cgOrderVo.endDate3=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px" ></date-picker></col>
                    </form-item>
                    <form-item label="入库日期:">
                        <col span="12"> <date-picker @on-change="cgOrderVo.stockTime=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px"  ></date-picker></col>
                        <col span="12"> <date-picker @on-change="cgOrderVo.endDate4=$event"  type="datetime" format="yyyy-MM-dd HH:mm" placeHolder="请输入日期" style="width: 150px"  ></date-picker></col>
                    </form-item>
                    <form-item label="审核员:">
                        <i-select v-model="cgOrderVo.checker" style="width: 105px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>

                    <form-item label="采购员:">
                        <i-select v-model="cgOrderVo.purchaser" style="width: 110px"filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in cgUserList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="库管员:">
                        <i-select v-model="cgOrderVo.stockKeeper" style="width: 110px"filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in kgUserList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="供应商:">
                        <i-select v-model="cgOrderVo.providerId" style="width: 110px"filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="订单状态:">
                        <i-select v-model="cgOrderVo.state" style="width: 110px">
                            <i-option value="">--不限--</i-option>
                            <i-option value="0">未审核</i-option>
                            <i-option value="1">已审核</i-option>
                            <i-option value="2">已确认</i-option>
                            <i-option value="3">已入库</i-option>
                        </i-select>
                    </form-item>
                    <form-item label="编号:">
                        <i-input type="text" v-model="cgOrderVo.id" style="width: 50px;"/>
                    </form-item>
                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="pageNo=1;searchAll();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="cgOrderVo={ type:1};searchAll();pageNo=1"></i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>
    <i-table ref="table"   :columns="columns" :data="pageResult.rows"  :height="400" border stripe @on-row-dblclick="rowClick" @on-selection-change="tableSelection=arguments[0]" >

        <template  slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未审核":(row.state==1?"已审核":(row.state==2?"已确认":"已入库"))}}</span>

        </template>
    </i-table>

    <modal v-model="xiang" height="500" :width="700"  >
        <div style="width: 660px;height: 200px ;border: 0.5px lightgray solid">
            <i-form :label-width="80" >
                <form-item label="流水号:"style=" margin-top: 5px;float: left;">
                    <i-input v-model="order.id" size="large" style="width: 110px;text-align: center"readonly/>
                </form-item>
                <form-item label="供应商:"style=" margin-top: 5px;float:left">
                    <i-input  style="width: 180px;text-align: center" v-model="order.providerIdName" size="large"readonly/>
                </form-item>

                <form-item label="状态:"style=" margin-top: 5px; float:left">
                    <i-select  v-model="order.state" style="width: 88px;background-color: #FFFFFF;"disabled="disabled">
                        <i-option value="0" >未审核</i-option>
                        <i-option value="1">已审核</i-option>
                        <i-option value="2" >已确认</i-option>
                        <i-option value="3">已入库</i-option>
                    </i-select>
                    <!--     <i-input  style="width: 110px;text-align: center" v-model="order.state" size="large"readonly/>-->
                </form-item>
                <form-item label="下单员:"style=" margin-top: 70px; margin-left:-630px;float: left">
                    <i-input   style="width: 88px;text-align: center"v-model="order.creatorName" size="large"readonly/>
                </form-item>
                <form-item label="审核员:"style="  margin-top: 70px; margin-left:-458px;float: left">
                    <i-input   style="width: 88px;text-align: center"v-model="order.checkerName" size="large"readonly/>
                </form-item>
                <form-item label="采购员:"style="  margin-top: 70px; margin-left:-302px;float: left">
                    <i-input   style="width: 88px;text-align: center"v-model="order.purchaserName" size="large"readonly/>
                </form-item>
                <form-item label="库管员:"style=" margin-top: 70px; margin-left:-145px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.stockKeeperName" size="large"readonly/>
                </form-item>
                <form-item label="生成日期:" style="margin-top: 140px;margin-left:-650px;float: left">
                    <i-input  style="width: 88px;" v-model="order.createTime" size="large"readonly/>
                </form-item>
                <form-item label="审核日期:"style="margin-top: 140px;margin-left:-480px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.checkTime" size="large"readonly/>
                </form-item>
                <form-item label="采购日期:"style="margin-top: 140px;margin-left:-320px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.purchaseTime" size="large"readonly/>
                </form-item>
                <form-item label="出库日期:"style="margin-top: 140px;margin-left:-165px;float: left">
                    <i-input  style="width: 88px;text-align: center" v-model="order.stockTime" size="large"readonly/>
                </form-item>


            </i-form>
        </div>

        <i-table style="clear:both;" :columns="myColumnsGoods"  :data="mydata" :height="200" border stripe >

            <template  slot-scope="{row}" slot="state">
                <span>{{row.state==0?"未审核":(row.state==1?"已审核":(row.state==2?"已确认":"已入库"))}}</span>
            </template>

        </i-table>
        <div slot="footer">
            <i-button type="info" icon="md-archive" @click="caiDao">导出</i-button>
            <i-button type="error" icon="ios-print-outline" @click="exportPdf">打印浏览</i-button>
        </div>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%--@on-change="pageNo=arguments[0];search();"--%>
          :current.sync="pageNo"

          show-sizer
          :page-size-opts="[5,10,15]"
          @on-change="pageNo=arguments[0];searchAll();"
    <%--	@on-page-size-change切换每页条数时的回调，返回切换后的每页条数--%>
          @on-page-size-change="pageSize=arguments[0];searchAll();"
    />
</div>
<script>

    new Vue({
        el:"#root",
        data: {
            columns: [
                {key:"id",title:"编号",align:"center"},
                {title: "生成日期", key: "createTime",width:"119",align:"center"},
                {title: "审核日期", key: "checkTime",width:"119",align:"center"},
                {title: "开始日期", key: "purchaseTime",width:"119",align:"center"},
                {title: "结束日期", key: "stockTime",width:"119",align:"center"},
                {title: "下单员", key: "creatorName",align:"center"},
                {title: "审核员", key: "checkerName",align:"center"},
                {title: "采购员", key: "purchaserName",align:"center"},
                {title: "库管员", key: "stockKeeperName",align:"center"},
                {title: "供应商", key: "providerIdName",align:"center",width:"110"},
                {title: "合计金额", key: "totalMoney",align:"center"},
                {title: "订单状态", slot:"state",align:"center"}
            ],

            myColumnsGoods:[
                {title: "商品编号", key: "goodsId"},
                {title: "商品名称", key: "goodsName"},
                {title: "价格", key: "price"},
                {title: "数量", key: "num"},
                {title: "金额", key: "money"},
                {title: "状态", slot: "state"},
            ],
            pageResult:{
                rows:[],
                total:50
            },
            tableSelection:[],
            pageNo:1,
            pageSize:5,
            xiang:false,
            mydata:[],
            userList:[],
            cgUserList:[],
            kgUserList:[],
            providerList:[],
            order:{},
            oList:[],
            cgOrderVo:{
                type:1
            }
        },
        mounted(){
            this.searchAll();
            this.searchKgUserList();
            this.searchCgUserList();
            this.searchProviderList();
            this.searchUserList();
        }, methods:{
            searchAll(){
                axios.get(`${ctx}/caigou/cgddcx/search3/${this.pageNo}/${this.pageSize}`,{params:this.cgOrderVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchKgUserList(){
                axios.get(`${ctx}/renshi/user/Kglist`)
                    .then(({data})=>{
                        this.kgUserList=data.result;
                    });
            },
            searchCgUserList(){
                axios.get(`${ctx}/renshi/user/Cglist`)
                    .then(({data})=>{
                        this.cgUserList=data.result;
                    });
            },
            searchProviderList(){
                axios.get(`${ctx}/jibenxinxi/gys/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
            searchUserList(){
                axios.get(`${ctx}/renshi/user/list`)
                    .then(({data})=>{
                        this.userList=data.result;
                    });
            },

            //点击弹出订单详情
            rowClick(data1,index){//data 该行数据 ，index该行索引
                axios.get(`${ctx}/caigou/cgddcx/list?id=${data1.id}`)
                    .then(({data})=>{
                        this.mydata=data.result;
                        Object.assign(this.order,data1);
                        this.xiang=true
                    })
            },
            caiDao(){


                //获得你要携带的参数
                location.href=`${ctx}/caigou/cgddcx/exportExcelCha?id=${this.order.id}
                &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}
                &checkerName=${this.order.checkerName}
                &purchaserName=${this.order.purchaserName}
                &stockKeeperName=${this.order.stockKeeperName}
                `

            },
            exportPdf(){
                location.href=`${ctx}/caigou/cgddcx/exportPdfCha?id=${this.order.id}
                &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}
                &checkerName=${this.order.checkerName}
                &purchaserName=${this.order.purchaserName}
                &stockKeeperName=${this.order.stockKeeperName}
                `

            }

            },







    })
</script>
</body>
</html>
